    <style include="cr-shared-style">
      :host {
        --avatar-size: 96px;
        --avatar-spacing: 24px;
        /* Size of the outline for the selected avatar. This variable can be
         * modified when using the component with different sizes.
         */
        --selected-border: 4px;
        display: inline-flex;
      }

      #avatar-grid .avatar-container {
        height: var(--avatar-size);
        margin: calc(var(--avatar-spacing) / 2);
        position: relative;
        width: var(--avatar-size);
      }

      #avatar-grid .avatar {
        --avatar-focus-color: var(--google-grey-700);
        --avatar-gap-color: white;
        --avatar-gap-width: 2px;
        --avatar-selected-color: rgba(var(--google-blue-600-rgb), 0.4);

        background-position: center;
        background-repeat: no-repeat;
        border: 1px solid var(--paper-grey-300);
        border-radius: 100%;
        display: flex;
        height: var(--avatar-size);
        min-width: 0;
        padding: 0;
        transition: none !important;  /* Polymer's :host([animated]) rule. */
        width: var(--avatar-size);
      }

      #avatar-grid .iron-selected .avatar {
        --avatar-outline-color: var(--avatar-selected-color);
        --avatar-outline-width: var(--selected-border);
        outline: var(--avatar-outline-width) solid var(--avatar-outline-color);
      }

      .checkmark {
        --checkmark-size: 21px;
        --iron-icon-fill-color: white;
        background-color: var(--google-blue-600);
        border-radius: 100%;
        height: var(--checkmark-size);
        inset-inline-end: 0;
        padding: 1px;
        position: absolute;
        top: 0;
        visibility: hidden;
        width: var(--checkmark-size);
      }

      .iron-selected .checkmark {
        visibility: visible;
      }

      @media (prefers-color-scheme: dark) {
        #avatar-grid .avatar {
          --avatar-focus-color: var(--google-grey-500);
          --avatar-gap-color: var(--google-grey-800);
        }

        .checkmark {
          --iron-icon-fill-color: var(--google-grey-900);
          background-color: var(--google-blue-300);
        }
      }

      :host-context(.focus-outline-visible) #avatar-grid
          .avatar-container:not(.iron-selected) .avatar:focus {
        --avatar-outline-color: var(--avatar-focus-color);
        --avatar-outline-width: 1px;
      }

      cr-button {
        background-size: var(--avatar-size);
      }

      paper-tooltip {
        --paper-tooltip-delay-in: 100ms;
        --paper-tooltip-duration-in: 100ms;
        --paper-tooltip-duration-out: 100ms;
        --paper-tooltip-min-width: none;
      }
    </style>
    <cr-profile-avatar-selector-grid id="avatar-grid" role="radiogroup"
        ignore-modified-key-events="[[ignoreModifiedKeyEvents]]">
      <template is="dom-repeat" items="[[avatars]]">
        <div class$=
            "avatar-container [[getSelectedClass_(item, selectedAvatar)]]">
          <cr-button id="[[getAvatarId_(index)]]" aria-label="[[item.label]]"
              tabindex$="[[getTabIndex_(index, item, tabFocusableAvatar_)]]"
              class="avatar" on-click="onAvatarTap_" role="radio"
              style$="background-image: [[getIconImageSet_(item.url)]]"
              aria-checked$="[[getCheckedAttribute_(item, selectedAvatar)]]">
          </cr-button>
          <iron-icon icon="cr:check" class="checkmark"></iron-icon>
        </div>
        <paper-tooltip for="[[getAvatarId_(index)]]"
            offset="0" fit-to-visible-bounds>
          [[item.label]]
        </paper-tooltip>
      </template>
    </cr-profile-avatar-selector-grid>
